<template>
	<view>
		<u-toast ref="uToast" />
		<view class="width-80vw f-center" >
			<u-search  placeholder="搜索" @focus='show=true' :show-action='false' v-model="keyword"></u-search>
		</view>
		<view class="u-flex u-row-around f-center width-80vw">
			<view  >
				搜索分类：
			</view>
			<u-button :type="select=='title'?'warning':''" size="mini" @click="select='title'">文章标题</u-button>
		    <u-button :type="select=='body'?'warning':''" size="mini" @click="select='body'">文章内容</u-button>
		    <u-button :type="select=='time'?'warning':''" size="mini" @click="select='time'">日期</u-button>
		</view>
		<view class="huaclass" v-for="(item,index) in titleClasses" :key='index'>
			<u-button class="shoucang" size="mini" type="primary" :plain="true" @click="collection(item.cid)">+ 收藏</u-button>
			<view class="u-p-l-10 mt-20">
				<u-button type="success" :plain='true' size="mini" shape="square">{{item.title}}</u-button>
				<view class="mt-10">{{item.createTime}}</view>
			</view>
			<view class="u-p-l-15 mt-10">
				<rich-text :nodes="item.body"></rich-text>
				<view class="width-100vw u-text-center">
					<image v-if='item.imgUrl' :src="item.imgUrl" style="width: 500rpx;height: 400rpx;" mode="aspectFit"></image>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mixins,mix_com} from '@/public.js'
	export default {
		name: 'TopicClass',
		props:['pageSize'],
		mixins: [mixins,mix_com],
		data() {
			return {
				titleClass:[],
				keyword:'',
				show:false,
				select:'title',
				parise:false,
			}
		},
		methods:{
			collection(categoryId){//收藏话题分类
				this._m_collection({categoryId:categoryId})
			}
		},
		watch:{
			pageSize(){//监听话题分类加载更多
				this._m_gettitleClass(this.pageSize)
			}
		},
		computed:{
			titleClasses() {//文章搜索功能
				if(this.titleClass){
					return this.titleClass.filter(item => {
					if (this.select == 'title') {
						return item.title.includes(this.keyword) == true
					} else if (this.select == 'body') {
						return item.body.includes(this.keyword) == true
					} else if (this.select == 'time') {
						return item.createTime.includes(this.keyword) == true
					}
			
				})
				}else{
					return 0
				}
				
			}
		},
		created() {//获取文章数量
			this._m_gettitleClass(this.pageSize)
		}
	}
</script>

<style lang="scss">
     .huaclass{
		 position: relative;
		 .shoucang{
			 position: absolute;
			 right: 60rpx;
			 top: 0rpx;
		 }
	 }
</style>
